<template>
  <div class="uploadRecord">
    <el-dialog title="服务记录"
      :visible.sync="show"
      width="600"
      :before-close="handleCloseRecord">
      <el-form :model="recordForm"
        ref="recordForm"
        class="recordForm"
        :rules="recordRule"
        label-width="92px">
        <el-form-item label="客户诉求"
          prop="customerRequirement">
          <el-input placeholder="请输入内容"
            v-model.trim="recordForm.customerRequirement"></el-input>
        </el-form-item>
        <el-form-item label="项目铺垫"
          prop="projectBedding">
          <el-input placeholder="请输入内容"
            v-model.trim="recordForm.projectBedding"></el-input>
        </el-form-item>
        <!-- <el-form-item label="皮肤问题"
          prop="skinProblems">
          <el-input placeholder="请输入内容"
            v-model.trim="recordForm.skinProblems"></el-input>
        </el-form-item> -->
        <el-form-item label="操作总结">
          <el-input placeholder="请输入操作总结"
            v-model.trim="subscribeDetail.consultantSummary"
            readonly></el-input>
        </el-form-item>
        <el-form-item label="配台总结">
          <el-input placeholder="请输入配台总结"
            v-model.trim="subscribeDetail.matchingSummary"
            readonly></el-input>
        </el-form-item>
        <el-form-item label="洁面总结">
          <el-input placeholder="请输入洁面总结"
            v-model.trim="subscribeDetail.cleansingSummary"
            readonly></el-input>
        </el-form-item>
        <el-form-item label="服务总结"
          prop="serviceDetail">
          <el-input placeholder="请输入服务总结"
            v-model.trim="recordForm.serviceDetail"></el-input>
        </el-form-item>
        <el-form-item label="客户标签">
          <el-tag :key="idx"
            v-for="(tag, idx) in selectTag"
            closable
            class="mr10"
            :disable-transitions="false"
            effect="dark"
            @close="handleCloseTag(idx)">
            {{tag.label}}
          </el-tag>
          <el-button class="button-new-tag"
            size="small"
            @click="toAddTag">+ 添加标签</el-button>
        </el-form-item>
        <!-- <el-form-item label="设备能量">
          <el-input-number placeholder="请输入内容"
            :controls="false"
            v-model.trim="recordForm.energy"></el-input-number>
        </el-form-item> -->
        <el-form-item label="客户照片">
          <imageArraySize :imageStr.sync="recordForm.customerImages"
            :width="100"
            :height="100"
            :limit="6"></imageArraySize>
        </el-form-item>
      </el-form>

      <div slot="footer"
        class="dialog-footer"
        style="text-align: center">
        <el-button @click="handleCloseRecord"
          style="width: 100px"
          size="small">取消</el-button>
        <el-button @click="toUploadRecord"
          size="small"
          type="primary"
          style="width: 100px">上传</el-button>
        <el-button @click="toUploadSave"
          size="small"
          type="primary"
          plain
          style="width: 100px">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加标签"
      :visible.sync="showTag"
      width="600"
      :before-close="handleCloseTagList">
      <div class="sign-list">
        <div class="item-sign-box"
          v-for="(item, index) in signList"
          :key="index">
          <div class="item-sign-label">{{item.label}}</div>
          <div class="item-sign-list">
            <el-tag :key="idx"
              v-for="(tag, idx) in item.children"
              closable
              class="item-sign-tag"
              :disable-transitions="false"
              :effect="tag.isSelect? 'dark': 'light'"
              @click="hanleClick(index, idx)"
              @close="handleClose(index, idx)">
              {{tag.label}}
            </el-tag>
            <el-input class="input-new-tag"
              v-if="item.inputVisible"
              v-model="item.inputValue"
              :ref="`saveTagInput_${index}`"
              size="mini"
              @keyup.enter.native="handleInputConfirm(index, $event)"
              @blur="handleInputConfirm(index, $event)">
            </el-input>
            <el-button v-else
              class="button-new-tag"
              size="mini"
              style="height: 28px"
              @click="showInput(index)">+ 添加标签</el-button>
          </div>
        </div>
      </div>
      <div slot="footer"
        class="dialog-footer"
        style="text-align: center">
        <el-button @click="handleAffirmTag"
          size="small"
          type="primary"
          style="width: 100px">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  serviceOptApi,
  customerSign,
  addCustomerSign,
  deleteCustomerSign
} from "@/api/service/workbench";
import imageArraySize from "@/components/ImageUpload/imageArraySize";

export default {
  data () {
    return {
      customerTags: [],
      // inputVisible: false,
      // inputValue: '',
      recordForm: {
        customerRequirement: '',
        projectBedding: '',
        skinProblems: '',
        serviceDetail: '',
        energy: '',
        customerImages: ''
      },
      recordRule: {
        customerRequirement: [
          { required: true, message: '请输入客户诉求', trigger: 'blur' },
        ],
        projectBedding: [
          { required: true, message: '请输入项目铺垫', trigger: 'blur' },
        ],
        // skinProblems: [
        //   { required: true, message: '请输入皮肤问题', trigger: 'blur' },
        // ],
        serviceDetail: [
          { required: true, message: '请输入服务详情', trigger: 'blur' },
        ]
      },
      selectTag: [],
      signList: [],
      showTag: false
    }
  },
  props: {
    subscribeId: {
      type: [String, Number]
    },
    show: {
      type: Boolean,
      default: false
    },
    infoRow: {
      type: Object
    },
    subscribeDetail: {
      type: Object
    }
  },
  watch: {
    infoRow() {
      this.recordForm = {
        customerRequirement: this.infoRow.customerRequirement || '',
        projectBedding: this.infoRow.projectBedding || '',
        skinProblems: this.infoRow.skinProblems || '',
        serviceDetail: this.infoRow.serviceDetail || '',
        energy: this.infoRow.energy || '',
        customerImages: this.infoRow.customerImages
      }
      let arr = []
      if (this.infoRow.labelInfoList) {
        this.infoRow.labelInfoList.forEach(item => {
          arr.push({
            label: item.labelName,
            value: item.labelId
          })
        })
        this.selectTag = arr
      }
    }
  },
  components: {
    imageArraySize
  },
  created () {
    this.getCustomerSign()
    if (this.infoRow) {
      this.recordForm = {
        customerRequirement: this.infoRow.customerRequirement || '',
        projectBedding: this.infoRow.projectBedding || '',
        skinProblems: this.infoRow.skinProblems || '',
        serviceDetail: this.infoRow.serviceDetail || '',
        energy: this.infoRow.energy || '',
        customerImages: this.infoRow.customerImages
      }
      let arr = []
      if (this.infoRow.labelInfoList) {
        this.infoRow.labelInfoList.forEach(item => {
          arr.push({
            label: item.labelName,
            value: item.labelId
          })
        })
        this.selectTag = arr
      }

    }
  },
  methods: {
    getCustomerSign () {      
      customerSign().then(res => {
        if (res?.data) {
          let { data } = res
          data.forEach(item => {
            item.inputVisible = false
            item.inputValue = ''
            if (item.children) {
              item.children.forEach(val => {
                val.isSelect = false
                this.selectTag.forEach(v => {
                  if (v.value == val.value) {
                    val.isSelect = true
                  }
                })
              })
            }
          })
          this.signList = data
        }
      })
    },
    toAddTag () {
      this.showTag = true
    },
    handleCloseRecord () {
      this.$emit('handleCloseRecord')
    },
    handleCloseTagList () {
      this.showTag = false
    },
    handleAffirmTag () {
      let arr = []
      this.signList.forEach(item => {
        if (item.children) {
          item.children.forEach(val => {
            if (val.isSelect) {
              arr.push(val)
            }
          })
        }
      })
      this.selectTag = arr
      this.showTag = false
    },
    handleCloseTag (idx) {
      this.selectTag.splice(idx, 1);
    },
    hanleClick (index, idx) {
      this.$set(this.signList[index].children[idx], 'isSelect', !this.signList[index].children[idx].isSelect)
    },
    handleClose (index, idx) {
      let item = this.signList[index].children[idx]
      deleteCustomerSign(item.value).then(res => {
        this.signList[index].children.splice(idx, 1);
      })
    },
    showInput (index) {
      this.signList[index].inputVisible = true;
      this.$nextTick(_ => {
        // this.$refs[`saveTagInput_${index}`].$refs.input.focus();
      });
    },
    handleInputConfirm (index, evt) {
      let inputValue = this.signList[index].inputValue;
      let labelPid = this.signList[index].value
      if (inputValue) {
        // this.signList[index].children.push(inputValue);
        addCustomerSign({
          labelPid: labelPid || '0',
          labelName: inputValue,
          dataStatus: '1',
          dataPriority: '10',
          categoryDepth: '1'
        }).then(res => {
          this.getCustomerSign()
          this.signList[index].inputVisible = false;
          this.signList[index].inputValue = '';
        })
      } else {
        this.signList[index].inputVisible = false;
        this.signList[index].inputValue = '';
      }
    },
    toUploadSave() {
      let labelInfoList = []
            this.selectTag.forEach(item => {
              labelInfoList.push({
                labelId: item.value
              })
            })
            serviceOptApi({
              subscribeId: this.subscribeId,
              labelInfoList,
              ...this.recordForm
            }).then(res => {
              this.msgSuccess('保存成功')
              this.$emit('handleCloseRecord')
            })
    },
    toUploadRecord () {
      this.$refs['recordForm'].validate((valid) => {
        if (valid) {
          this.$confirm('确认上传服务记录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // this.recordForm.customerTag = this.customerTags.join(',')
            let labelInfoList = []
            this.selectTag.forEach(item => {
              labelInfoList.push({
                labelId: item.value
              })
            })
            serviceOptApi({
              subscribeId: this.subscribeId,
              serviceStatus: '3',
              labelInfoList,
              ...this.recordForm
            }).then(res => {
              this.msgSuccess('上传成功')
              this.$emit('uploadRecord')
            })
          }).catch(() => {

          });

        } else {
          return false;
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.input-new-tag {
  width: 90px;
  vertical-align: bottom;
}
.sign-list {
  width: 100%;
  .item-sign-box {
    border: 1px solid #eee;
    border-radius: 10px;
    &:not(:last-child) {
      margin-bottom: 20px;
    }
  }
  .item-sign-label {
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    padding: 10px;
    &::before {
      content: "";
      display: block;
      width: 3px;
      height: 12px;
      border-radius: 1px;
      background-color: #5da9ef;
      margin-right: 6px;
    }
  }
  .item-sign-list {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 10px 10px 20px;
    .item-sign-tag {
      cursor: pointer;
      margin: 0 10px 10px 0;
    }
  }
}
</style>
